<template>
  <ul class="color-list">
    <li
      class="xm-color"
      style="cursor: pointer"
      v-for="(color, index) in colors"
      :key="index"
      @click="modelValue = color"
    >
      <div
        class="xm-color-item-outer"
        :style="{ background: modelValue === color ? color : 'transparent' }"
      >
        <div class="xm-color-item-inner">
          <div class="xm-color-item" :style="{ background: color }"></div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script setup>
const modelValue = defineModel({ default: "#e79138" });
const colors = ref([
  "#e79138",
  "#f1c231",
  "#a1bb31",
  "#6dbe5e",
  "#3cb780",
  "#29a6c1",
  "#3875e4",
  "#8b3fd6",
  "#be3b83",
  "#e13d3a",
  "#f2b04b",
  "#ffd965",
  "#dde359",
  "#93c47d",
  "#98d98b",
  "#42d6c3",
  "#78bffa",
  "#cf66f7",
  "#ee70a4",
  "#ec6666",
  "#fabb7c",
  "#c0b89e",
  "#bdc2b0",
  "#acbdc4",
  "#b6c5b0",
  "#abc4bc",
  "#a4afc7",
  "#b6a1f5",
  "#f592c8",
  "#f18181",
]);
// const props = defineProps({
//   data: {
//     type: Array,
//     default: () => [],
//   },
// });
</script>

<style lang="scss" scoped>
.color-list {
  display: flex;
  align-items: center;

  list-style-type: none;
  padding-inline-start: 0;
  margin: 0;
  flex-wrap: wrap;
  width: 380px;

  .xm-color {
    margin: 5px;
    width: 20px;
    margin-right: 12px;
    cursor: pointer;
    .xm-color-item-outer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transition: all 1s;

      .xm-color-item-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        background: #ffffff;
        border-radius: 50%;
        .xm-color-item {
          width: 14px;
          height: 14px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
